<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import qs from 'qs';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const businessId = ref(route.query.businessId);
const business = ref({});
const user = ref({});
const cartArr = ref([]);
const deliveryaddress = ref({});

// 在组件挂载时执行
onMounted(() => {
  // 从sessionStorage中获取用户信息
  user.value = JSON.parse(sessionStorage.getItem('user'));
  // 从localStorage中获取用户地址信息
  deliveryaddress.value = JSON.parse(localStorage.getItem(user.value.userId));

  // 查询当前商家
  axios.post('http://localhost/business/BusinessController/getBusinessById', qs.stringify({ businessId: businessId.value }))
      .then(response => {
        business.value = response.data;
      }).catch(error => {
    console.error(error);
  });

  // 查询当前用户在购物车中的当前商家食品列表
  axios.post('http://localhost/cart/CartController/listCart', qs.stringify({ userId: user.value.userId, businessId: businessId.value }))
      .then(response => {
        cartArr.value = response.data;
      }).catch(error => {
    console.error(error);
  });
});

const totalPrice = computed(() => {
  let total = 0;
  for (let cartItem of cartArr.value) {
    total += cartItem.food.foodPrice * cartItem.quantity;
  }
  total += business.value.deliveryPrice;
  return total;
});

const toUserAddress = () => {
  router.push({ path: '/userAddress', query: { businessId: businessId.value } });
};

const goToPayment = () => {
  if (!deliveryaddress.value) {
    alert('请选择送货地址！');
    return;
  }
  // 创建订单
  axios.post('http://localhost/order/OrdersController/createOrders', qs.stringify({
    userId: user.value.userId,
    businessId: businessId.value,
    daId: deliveryaddress.value.daId,
    orderTotal: totalPrice.value
  })).then(response => {
    const orderId = response.data;
    if (orderId > 0) {
      router.push({ path: '/payment', query: { orderId: orderId } });
    } else {
      alert('创建订单失败！');
    }
  }).catch(error => {
    console.error(error);
  });
};

</script>

<template>
  <div class="wrapper">
    <!--header-->
    <header>
      <p>确认订单</p>
    </header>
    <!--订单信息-->
    <div class="order_info" >
      <h5>订单配送至：</h5>
      <div class="address" @click="toUserAddress">
        <p>{{deliveryaddress!=null?deliveryaddress.address:'请选择送货地址'}}</p>
        <i class="jiantou iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <p>{{user.userName}} {{user.userId}}</p>
    </div>
    <h3>{{business.businessName}}</h3>
    <!--订单明细部分-->
    <ul class="order_detailed">
      <li v-for="item in cartArr">
        <div class="left">
          <img :src="item.food.foodImg">
          <p>{{item.food.foodName}} x {{item.quantity}}</p>
        </div>
        <p>￥{{item.food.foodPrice*item.quantity}}</p>
      </li>
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp01.png">-->
<!--          <p>玉米鲜肉（水饺） x 1</p>-->
<!--        </div>-->
<!--        <p>￥16</p>-->
<!--      </li>-->
    </ul>
    <div class="order_deliveryfee">
      <p>配送费</p>
      <p>￥{{business.deliveryPrice}}</p>
    </div>
    <!--订单合计部分-->
    <div class="total">
      <div class="left">
        ￥{{totalPrice}}
      </div>
      <div class="right" @click="goToPayment">
        去支付
      </div>

    </div>
  </div>
</template>

<style scoped lang="less">
@import url('../assets/font/font_sanjiaoright/iconfont.css');
/**********总容器**********/
.wrapper{
  width: 100%;
  height: 100%;
}
/**********header**********/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/**********订单信息**********/
.wrapper .order_info{
  width: 100%;
  margin-top: 12vw;
  background-color: #0097ff;
  box-sizing: border-box;
  padding: 2vw;
  color: #fff;
}
.wrapper .order_info h5{
  font-size: 3vw;
  font-weight: 300;
}
.wrapper .order_info .address{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  margin: 1vw 0;
}
.wrapper .order_info .address p{
  width: 90%;
  font-size: 5vw;
}
.wrapper .order_info .address i{
  font-size: 6vw;
}
.wrapper .order_info p{
  font-size: 3vw;
}
.wrapper h3{
  box-sizing: border-box;
  padding: 3vw;
  width: 100%;
  font-size: 4vw;
  color: #666;
  border-bottom: solid 1px #ddd;
}
/**********订单明细**********/
.wrapper .order_detailed{
  width: 100%;
}
.wrapper .order_detailed li{
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  color: #666;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order_detailed li .left{
  display: flex;
  align-items: center;
}
.wrapper .order_detailed li .left img{
  width: 10vw;
  height: 10vw;
}
.wrapper .order_detailed li .left p{
  font-size: 3.5vw;
  margin-left: 3vw;
}
.wrapper .order_detailed li p{
  font-size: 3.5vw;
}
.wrapper .order_deliveryfee{
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  font-size: 3.5vw;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/**********订单合计部分**********/
.wrapper .total{
  width: 100%;
  height: 14vw;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}
.wrapper .total .left{
  flex-grow: 2;
  background-color: #505051;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .total .right{
  flex-grow: 1;
  background-color: #38ca73;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>